<template>
    <div class="pannel left-border-2">
       <div class="pannel-title">
        实时分析预警
       </div>
       <div class="pannel-sub-title">
        Real time analysis and early warning
       </div>
       <div class="warning-list">
          <dv-scroll-board :config="config"/>
       </div>
    </div>
  </template>
  
  <script>
  export default {
    components : {
      
    },
    data() {
      return {
        config: {
          data: [
            ['01', '12:02:04', '<span class="location-name">无人机巡航</span>','巡航全阶段无异常','<span class="normal">正常</span>'],
            ['02', '08:12:09', '<span class="location-name">河道入坝口</span>','本段暂无异常','<span class="normal">正常</span>'],
            ['03', '12:22:12', '<span class="location-name">浅滩沙地口</span>','边坡落石','<span class="warning">拥堵</span>'],
            ['04', '13:32:33', '<span class="location-name">入坝口</span>','阶段无异常','<span class="normal">正常</span>'],
            ['05', '15:18:56', '<span class="location-name">出坝口</span>','流速减缓','<span class="warning">阻塞</span>'],
            ['06', '19:03:32', '<span class="location-name">03号雷达监测</span>','暂无异常','<span class="normal">正常</span>'],
            ['07', '16:12:14', '<span class="location-name">河道3号弯</span>','阻碍物增多','<span class="warning">拥堵</span>'],
            ['01', '12:02:04', '<span class="location-name">无人机巡航</span>','巡航全阶段无异常','<span class="normal">正常</span>'],
            ['02', '08:12:09', '<span class="location-name">河道入坝口</span>','本段暂无异常','<span class="normal">正常</span>'],
            ['03', '12:22:12', '<span class="location-name">浅滩沙地口</span>','边坡落石','<span class="warning">拥堵</span>'],
            ['04', '13:32:33', '<span class="location-name">入坝口</span>','阶段无异常','<span class="normal">正常</span>'],
            ['05', '15:18:56', '<span class="location-name">出坝口</span>','流速减缓','<span class="warning">阻塞</span>'],
            ['06', '19:03:32', '<span class="location-name">03号雷达监测</span>','暂无异常','<span class="normal">正常</span>'],
            ['07', '16:12:14', '<span class="location-name">河道3号弯</span>','阻碍物增多','<span class="warning">拥堵</span>'],
            ['01', '12:02:04', '<span class="location-name">无人机巡航</span>','巡航全阶段无异常','<span class="normal">正常</span>'],
            ['02', '08:12:09', '<span class="location-name">河道入坝口</span>','本段暂无异常','<span class="normal">正常</span>'],
            ['03', '12:22:12', '<span class="location-name">浅滩沙地口</span>','边坡落石','<span class="warning">拥堵</span>'],
            ['04', '13:32:33', '<span class="location-name">入坝口</span>','阶段无异常','<span class="normal">正常</span>'],
            ['05', '15:18:56', '<span class="location-name">出坝口</span>','流速减缓','<span class="warning">阻塞</span>'],
            ['06', '19:03:32', '<span class="location-name">03号雷达监测</span>','暂无异常','<span class="normal">正常</span>'],
            ['07', '16:12:14', '<span class="location-name">河道3号弯</span>','阻碍物增多','<span class="warning">拥堵</span>'],
            ['08', '12:22:54', '<span class="location-name">河道入弯段</span>','流体密度增大','<span class="warning">阻塞</span>'],
            ['09', '12:22:04', '<span class="location-name">无人机巡航</span>','巡航全阶段无异常','<span class="normal">正常</span>'],
            ['10', '12:22:12', '<span class="location-name">无人机巡航</span>','巡航全阶段无异常','<span class="normal">正常</span>']
          ],
        
          rowNum: 14,
          align: ['center','left','left','left','right'],
          oddRowBGC : 'rgba(255, 255, 255, 0.1)',
          evenRowBGC: '',
          columnWidth: ['30','80','120','120','60'],
        }
      }
    }
  };
  </script>
  
  <style lang="less">
    .left-border-2 {
        box-sizing: border-box;
        border-width: 4px;
        border-style: solid;
        border-color: rgba(255, 184, 34, 1);
        border-top: 0px;
        border-right: 0px;
        border-bottom: 0px;
        border-radius: 0px;
    }
    .warning-list {
      padding: 5px 2px 2px 10px;
      display: flex;
      flex-wrap: wrap;
      width: 95%;
      height: 30rem;
      font-family: '微软雅黑', sans-serif;
      font-weight: 400;
      font-style: normal;
      color: rgba(255, 255, 255, 0.8);
    }
    .dv-scroll-board .rows .row-item {
      font-size: 12px !important;
    }
    .ceil {
      padding: 0 2px !important
    }
    .location-name {
      color: #87F7C7;
    }
    .normal {
      width: 30px;
      color: black;
      background-color:  rgba(102, 186, 248, 1);
      padding: 2px 3px;
      border-radius: 2px;
    }

    .warning {
      width: 30px;
      color: black;
      background-color:  rgba(237, 165, 78, 1);
      padding: 2px 3px;
      border-radius: 2px;
    }
  </style>